<template>
	<view class="labour-day">
		<block v-if="show">
			<movable-area class="share">
				<movable-view direction="all" class="share-img">
					<image 
						src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/national-day/share.png?v=1" 
						@click="share">
					</image>
				</movable-view>
			</movable-area>
			<view class="labour-day-pic">
				<image 
					src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/static/images/other/2021-04-27/20210427/928d8a03fc41e09cf4e57d86f6694faf.jpg" 
					mode="widthFix">
				</image>
			</view>
			<view class="labour-day-moudel-1">
				<view class="moudel-1-goods-list">
					<view class="moudel-1-goods-item" v-for="(data,index) in shelf1" :key="index" @click="goInfo(data.goods_type,data.goods_id,'五一活动-一居室时尚小套餐(7件套)')">
						<image :src="data.image" mode="widthFix"></image>
					</view>
				</view>
				<view class="moudel-2-goods-list-tit">
					<image 
						src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/static/images/other/2021-04-27/20210427/50b1712d37f41cc4561b051aff6719b5.png">
					</image>
				</view>
				<view class="moudel-2-goods-list">
					<view class="moudel-2-goods-item" v-for="(data,index) in shelf2" :key="index" @click="goInfo(data.goods_type,data.goods_id,'五一活动-全屋套餐')">
						<image :src="data.image" mode="aspectFit"></image>
						<view class="goods-item-info">
							<view class="goods-item-info-left">
								<view class="goods-name">{{data.goods_name}}</view>
								<view class="goods-price">活动价：￥<text>{{data.retail_price}}</text></view>
							</view>
							<view class="goods-item-info-btn"><image src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/static/images/other/2021-04-27/20210427/df481716e10442735b49fa0cb566f781.png"></image></view>
						</view>
					</view>
				</view>
			</view>
			<view class="labour-day-moudel-gap">
				<image 
					src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/static/images/other/2021-04-27/20210427/082e92dc8cff9b2081daa45e090917b9.jpg" 
					mode="widthFix">
				</image>
			</view>
			<view class="moudel-3-goods-list">
				<view class="moudel-3-goods-list-tit">
					热卖单品
					<view class="line"></view>
					<view class="line"></view>
					<view class="line"></view>
				</view>
				<view class="moudel-3-goods-item" v-for="(data,index) in shelf3" :key="index" @click="goInfo(data.goods_type,data.goods_id,'五一活动-热卖单品')">
					<image :src="data.image" mode="aspectFit"></image>
					<view class="goods-item-info">
						<view class="goods-item-info-left">
							<view class="goods-name">{{data.goods_name}}</view>
							<view class="goods-price">活动价：￥<text>{{data.retail_price}}</text></view>
						</view>
						<view class="goods-item-info-btn"><image src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/static/images/other/2021-04-27/20210427/df481716e10442735b49fa0cb566f781.png"></image></view>
					</view>
				</view>
			</view>
			<view class="labour-day-bottom">
				<image
					src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/static/images/other/2021-04-27/20210427/4f39fb0d2789c4dc04e0d51a19d36054.jpg" 
					mode="widthFix">
				</image>
			</view>
		</block>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				shelf1: [],
				shelf2: [],
				shelf3: [],
				posterImg: ''
			};
		},
		onLoad(options){
			if(uni.getStorageSync('userInfo')){
				this.addFoot('查看五一活动')
			}
			// 如果用户从分享的小程序卡片或扫描二维码进来的,设置一个url缓存,登录后返回当前缓存url
			let pages = getCurrentPages();
			let curPage = pages[pages.length - 1];
			uni.setStorageSync('newurl',curPage.$page.fullPath)
			if(options.parent_id){
				uni.setStorageSync('parent_id',options.parent_id)
				this.$u.api.binding_refer({id: options.parent_id}).catch(() => {
					// console.log('接口报错：绑定失败')
				})
			}
			let scene
			if(options.scene){
				scene = decodeURIComponent(options.scene)
				uni.setStorageSync('parent_id',this.filterUrlParam(scene).parent_id)
				this.$u.api.binding_refer({id: this.filterUrlParam(scene).parent_id}).catch(() => {
					console.log('接口报错：绑定失败')
				})
			}
		},
		onShow() {
			this.init()
		},
		methods: {
			// 解析小程序scene参数
			filterUrlParam(urlSearch){
			  let ret = {}
			  let regParam = /([^&=]+)=([\w\W]*?)(&|$|#)/g
			  if (urlSearch) {
			    var strParam = urlSearch;
			    var result
			    while ((result = regParam.exec(strParam)) != null) {
			      ret[result[1]] = result[2]
			    }
			  }
			  return ret
			},
			init(){
				this.$u.api.ActivityShelf({shelf_id: 210}).then(res => {
					this.show = true
					this.shelf1 = JSON.parse(JSON.stringify(res.datas.shelf_list))[0].goods_list
					this.shelf2 = JSON.parse(JSON.stringify(res.datas.shelf_list))[1].goods_list
					this.shelf3 = JSON.parse(JSON.stringify(res.datas.shelf_list))[2].goods_list
					uni.setNavigationBarTitle({
						title: res.datas.name
					})
					this.posterImg = res.datas.img
					if(uni.getStorageSync('userInfo')){
						this.$u.mpShare = {
							title: res.datas.name,
							path: '/events/labour-day?parent_id='+ JSON.parse(uni.getStorageSync('userInfo')).user_id,
							imageUrl: res.datas.image
						}
					}
				})
			},
			goInfo(goods_type,goods_id,where){
				switch (goods_type){
					case 1:
						getApp().goProInfo(goods_id)
						break;
					case 2:
						uni.navigateTo({
							animationDuration: 500,
							url: '/pages/package/house-info?group_id='+goods_id
						})
						break;
					case 3:
						uni.navigateTo({
							animationDuration: 500,
							url: '/pages/package/n98-info?group_id='+goods_id
						})
						break;
				}
				if(uni.getStorageSync('userInfo')){
					this.addFoot(where,goods_id)
				}
			},
			share(){
				let pages = getCurrentPages();
				let curPage = pages[pages.length - 1];
				let url = encodeURIComponent(curPage.$page.fullPath)
				uni.navigateTo({
					animationDuration: 500,
					url: '/events/events-poster?posterImg='+encodeURIComponent(this.posterImg) + '&url='+ url + '&name=五一活动'
				})
				if(uni.getStorageSync('userInfo')){
					this.addFoot('315活动-分享海报')
				}
			},
			addFoot(where,goods_id){
				this.$u.api.AddFoot({
					// #ifdef MP-WEIXIN
					type: 1,
					// #endif
					// #ifdef APP-PLUS
					type: 2,
					// #endif
					// #ifdef H5
					type: 3,
					// #endif
					store_id: uni.getStorageSync('userInfo')?JSON.parse(uni.getStorageSync('userInfo')).store_id:'',
					client: 1,
					where: where,
					stay_time: 0,
					goods_id: goods_id?goods_id:0,
					store_goods_id: 0,
					is_new: 1
				})
			},
		}
	}
</script>

<style lang="scss">
	@font-face {
		font-family: 'din';
		src: url('https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/recomBrand/DIN-Bold.ttf') format('truetype');
	}
	.labour-day{
		.share{
			position: fixed !important;
			left: 0;
			top: 50rpx;
			bottom: 50rpx;
			left: 50rpx;
			right: 0;
			pointer-events: none;
			z-index: 20;
			width: auto;
			height: auto;
			.share-img{
				position: absolute !important;
				width: 80rpx;
				height: 80rpx;
				pointer-events: auto;
				border-radius: 50%;
				top: initial;
				left: initial;
				right: 40rpx;
				bottom: 0;
				text-align: center;
				image{
					width: 80rpx;
					height: 80rpx;
				}
			}
		}
		.labour-day-pic{
			image{
				width: 100%;
			}
		}
		.labour-day-moudel-1{
			background: url('https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/static/images/other/2021-04-27/20210427/14d08f75c28ee123816f56054ac866da.jpg') repeat-y;
			background-size: 100%;
			padding: 0 26rpx;
			.moudel-1-goods-list{
				.moudel-1-goods-item{
					image{
						width: 100%;
					}
				}
			}
			.moudel-2-goods-list-tit{
				text-align: center;
				padding: 82rpx 0 27rpx;
				image{
					width: 505rpx;
					height: 77rpx;
				}
			}
			.moudel-2-goods-list{
				padding-bottom: 85rpx;
				.moudel-2-goods-item{
					width: 698rpx;
					height: 699rpx;
					background: url('https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/static/images/other/2021-04-27/20210427/2e2b61e98c201f27f27cb5e4f7ae3437.png') no-repeat;
					background-size: cover;
					padding: 24rpx 26rpx;
					margin-bottom: 35rpx;
					&:last-child{
						margin-bottom: 0;
					}
					image{
						width: 645rpx;
						height: 500rpx;
						border-radius: 8rpx;
					}
					.goods-item-info{
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-top: 45rpx;
						.goods-item-info-left{
							flex: 1;
							min-width: 0;
							margin-right: 20rpx;
							.goods-name{
								font-size: 32rpx;
								font-weight: bold;
								color: #141414;
								white-space: nowrap;
								overflow: hidden;
								text-overflow: ellipsis;
							}
							.goods-price{
								font-size: 24rpx;
								text{
									font-family: 'din';
									color: #CC4D31;
									font-weight: bold;
									font-size: 48rpx;
								}
							}
						}
						.goods-item-info-btn{
							image{
								width: 174rpx;
								height: 60rpx;
							}
						}
					}
				}
			}
		}
		.labour-day-moudel-gap{
			image{
				width: 100%;
			}
		}
		.moudel-3-goods-list{
			padding: 0 26rpx;
			background: url('https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/static/images/other/2021-04-27/20210427/953e2615e5ae24d29aa24e7a07399dbe.png') repeat-y;
			background-size: 100%;
			.moudel-3-goods-list-tit{
				text-align: center;
				font-size: 42rpx;
				font-weight: bold;
				.line{
					height: 2rpx;
					margin-top: 6rpx;
					background-color: #2d3340;
					&:first-child{
						margin-top: 30rpx;
					}
				}
			}
			.moudel-3-goods-item{
				background-color: #BD3618;
				border-radius: 10rpx;
				margin-top: 35rpx;
				padding: 23rpx;
				position: relative;
				height: 300rpx;
				display: flex;
				align-items: center;
				&::before{
					content: '';
					position: absolute;
					width: 678rpx;
					height: 283rpx;
					left: 10rpx;
					background: url('https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/static/images/other/2021-04-27/20210427/722aad20917206e4a795fdf2b25a862e.png');
					background-size: 100%;
				}
				image{
					width: 266rpx;
					height: 257rpx;
					border-radius: 10rpx;
					background-color: #FFF;
					position: relative;
					z-index: 2;
				}
				&:nth-child(2n){
					.goods-item-info{
						order: -1;
						margin-left: 20rpx;
						margin-right: 20rpx;
					}
				}
				.goods-item-info{
					flex: 1;
					min-width: 0;
					margin-left: 40rpx;
					position: relative;
					z-index: 2;
					.goods-item-info-left{
						.goods-name{
							color: #F9E1B3;
							font-size: 28rpx;
						}
						.goods-price{
							color: #F9E1B3;
							font-size: 24rpx;
							padding: 10rpx 0 15rpx;
							text{
								font-family: 'din';
								font-size: 42rpx;
							}
						}
					}
					.goods-item-info-btn{
						image{
							width: 162rpx;
							height: 53rpx;
							border-radius: 10rpx;
							background-color: transparent;
						}
					}
				}
			}
		}
		.labour-day-bottom{
			image{
				width: 100%;
			}
		}
	}
</style>
